<template>
  <div id="out">
			<div class="top">
				<div class="top1">
					<span class="text">收货人</span>
					<span class="text1 text-1">请填写收货人姓名</span>
				</div><hr >
				<div class="top2">
					<span class="text">手机号码</span>
					<span class="text1">请填写收货人手机号码</span>
				</div><hr >
				<div class="top3">
					<span class="text">所在地区</span>
					<span class="text1">请选择所在地区</span>
					<img src="/static/imgs_s11/s011_choice.png" >
				</div><hr >
				<div class="top4">
					<span class="text text-3" >详细地址</span>
					<span class="text1 text-2 text-3" >街道、门牌号等</span>
				</div>
			</div>
			<div class="mid">
				<div>设置默认地址</div>
				<img class="img1" src="/static/imgs_s11/s011_fillet_rectangle.png" alt="">
				<img class="img2" src="/static/imgs_s11/s011_ellipse.png" alt="">
				
			</div>
			<div class="btm">
				保存地址
			</div>
		</div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
			#out{
				width: 375px;
				height: 667px;
				background-color: rgb(244,244,244);
				border:#F0F0F0 solid 1px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
			}
			
			#out .top{
				width: 373px;
				height: 263px;
				margin: 67px 0px;
				border:#FFFFFF solid 1px;
				background-color: #FFFFFF;
			}
			#out .top hr{
				border: #F0F0F0 solid 0.8px;
			}
			#out .top .top1,.top2,.top3{
				width: 375px;
				height: 43px;
				
				display: flex;
				flex-direction: row;
				
			}
			#out .top .text{
				font-size: 13px;
				margin-left: 14px;
				
				margin-top: 10px;
			}
			#out .top .text1{
				font-size: 13px;
				color: #C0BFBF;
				margin-top: 10px;
				margin-left: 40px;
			}
			#out .top .text-1{
				margin-left: 53px;
			}
			#out .top .text-2{
				margin-left: 38px;
			}
			
			#out .top .top3 img
			{
				width: 11px;
				height: 11px;
				margin-top: 15px;
				margin-left: 150px;
			}
			#out .top .top4 span{
				display: inline-block;
			}
			
			
			
			
			
			
			
			#out .mid{
				width: 375px;
				height: 48px;
				margin-top: -55px;
				border:#FFFFFF solid 0.1px;
				background-color: #FFFFFF;
			}
			#out .mid div{
				
				width: 79px;
				height: 12px;
				margin-top: 15px;
				margin-left: 10px;
				font-size: 10px;
				
			}
			#out .mid .img1{
				width: 42px;
				height: 18px;
				position: absolute;
				top: 360px;
				left: 320px;
				
				
				
			}
			
			#out .mid .img2{
				width: 25px;
				height: 25px;
				position: absolute;
				top: 357px;
				left: 318px;
				
				
				
				
			}
			
			
			
			
			#out .btm{
				width: 344px;
				height: 35px;
				margin-top: 220px;
				margin-left: 16px;
				
				
				background-color:rgb(57,176,110);
				
				border-radius:18px;
				text-align:center;
				color: #FFFFFF;
				line-height: 35px;
				font-size: 14px;
			}
			
			
			
		</style>
